/**
 * Created by shizi on 2018/12/27.
 */

// 加载React
import React from 'react'
// 加载Component
import { Component, PureComponent } from 'react'

import {
    Form,
    Input,
    InputNumber,
    Icon,
    Select,
    Row,
    Col,
    Drawer,
    Checkbox,
    Radio,
} from 'antd';
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
export default class PriviewForm extends Component {
    constructor(props, context) {
        super(props, context)
        this.state = {
            subElements: []
        }
    }

    getFormItem = (item, props) => {//根据元素类型获取控件
        const { type } = item;
        if (type === `input`) {
            return <Input {...props} />
        } else if (type === `inputNumber`) {
            return <InputNumber {...props} />
        } else if (type === `checkbox`) {
            return <Checkbox {...props} />
        } else if (type === `checkboxGroup`) {
            return (
                <CheckboxGroup  {...props} style={{ width: `100%`, lineHeight: `32px`, position: `relative`, top: 5 }}>
                    <Row>
                        {
                            item.options.map((e, i) => (
                                <Col
                                    key={i}
                                    title={e.label}
                                    span={24 / item.optionRowShow}
                                    style={{ whiteSpace: `nowrap`, textOverflow: `ellipsis`, overflow: `hidden` }}
                                >
                                    <Checkbox value={e.value}>
                                        {e.label}
                                    </Checkbox>
                                </Col>
                            ))
                        }
                    </Row>
                </CheckboxGroup>
            )
        } else if (type === `radio`) {
            return (
                <RadioGroup {...props} style={{ width: `100%`, lineHeight: `32px`, position: `relative`, top: 5 }}>
                    <Row>
                        {
                            item.options.map((e, i) => (
                                <Col
                                    key={i}
                                    title={e.label}
                                    span={24 / item.optionRowShow}
                                    style={{ whiteSpace: `nowrap`, textOverflow: `ellipsis`, overflow: `hidden` }}
                                >
                                    <Radio value={e.value}>
                                        {e.label}
                                    </Radio>
                                </Col>
                            ))
                        }
                    </Row>
                </RadioGroup>
            )
        } else if (type == `select`) {
            return (
                <Select
                    style={{ width: 120 }}
                    {...props}
                >
                    {
                        item.options.map((e, i) => (
                            <Option
                                key={i}
                                value={e.value}>
                                {e.label}
                            </Option>
                        ))
                    }
                </Select>
            )
        }
    }

    render() {
        const { form } = this.props;
        return (
            <div>
                {this.getFormItem(form, {})}
            </div>
        )
    }
}
